<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>传统注册事件</button>
    <button>方法监听事件</button>
    <button>ie9 attachEvent</button>

    <script>
        // 给元素添加事件，称为注册事件或者绑定事件
        // 注册事件有两种方式：传统方式和方法监听注册方式

        // 1. 传统注册方式
        //      利用on开头的事件onclick
        //      <button onclick="alert('hi~')"></button>
        //      btn.onclick=function(){

        //      }
        // 特点：同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

        var btns = document.querySelectorAll('button');
        btns[0].onclick = function() {
                alert('hi~');
            }
            // 只能弹出一次 后注册的事件会覆盖前面注册的事件
        btns[0].onclick = function() {
            alert('how are you~');
        }

        // 2.方法监听注册方式（事件监听注册事件）
        //     w3c推荐的标准
        //     addEventListener() 它是一个方法
        //     IE9以前不支持此方法，可使用attchEvent()代替
        // 特点：同一个元素同一个事件可以注册多个监听器 按注册顺序依次执行

        // eventTarget.addEventListener(type, listener[, useCapture])
        // eventTarget.addEventListener()方法将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数
        // 该方法接受3个参数：
        // type: 事件类型字符串，比如click，mouseover，注意这里不要带on
        // listener： 事件处理函数，事件发生时，会调用该监听函数
        // useCapture：可选参数，默认是false。学完DOM事件流后再进一步学习

        btns[1].addEventListener('click', function() {
            alert(22);
        })
        btns[1].addEventListener('click', function() {
            alert(33);
        })

        // 3. attchEvent ie9以前的版本支持(了解即可)
        btns[2].attachEvent('onclick', function() {
            alert(11);
        })

        // 注册事件兼容性解决方案：(封装一个函数)
        function addEventListener(element, eventName, fn) {
            // 判断当前浏览器是否支持 addEventListener 方法
            if (element.addEventListener) {
                element.addEventListener(eventName, fn); // 第三个参数默认是false
            } else if (element.attachEvent) {
                element.attachEvent('on' + eventName, fn);
            } else {
                // 相当于 element.onclick = fn;
                element['on' + eventName] = fn;
            }
        }
    </script>
</body>

</html>